<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b>推荐话题</b>
        <el-button @click="moreTopic" style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <div  class="text item">
        <div class="content" v-for="(item) in recommandTopic" :key="item.id">
          <a :href="item.ling_url">
            <el-image style="width: 48px; height: 48px" :src="item.img_url" fit="fit"></el-image>
          </a>
          <a href="./">
            <span>{{ item.title }}</span>
          </a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import router from '../router'

export default {
  data () {
    return {
      recommandTopic: []
    }
  },
  created () {
  },
  // DOM对象加载完成时
  mounted () {
    this.getRecommandTopic()
  },
  methods: {
    moreTopic () {
      router.push('/topics')
    },
    async getRecommandTopic () {
      const { data: res } = await this.$http.get('article/api/v1/article/recommend_topics', { responseType: 'json' })
      if (res.code !== 0) {
        console.log('话题请求失败！')
      } else {
        this.recommandTopic = res.data
        // console.log(res)
      }
    }
  },
  computed: {},
  name: 'recommendedTopics'
}
</script>

<style lang="less" scoped>

.content{
  margin-top: 10px;
}
span{
  position: absolute;
  margin-top: 15px;
  margin-left: 20px;
}
</style>
